
<div class="container">
    <div class="row">

        <div class="login-section col-md-offset-3 col-md-6">
            <h2>Please enter user credentials</h2>
            <form id="loginForm" role="form">
                <!-- login email address -->
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input id="email" name="email" type="email" class="form-control" placeholder="Your email" required>
                </div>

                <!-- login password -->
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input id="password" name="password" type="password" class="form-control" placeholder="Your password" required>
                </div>

                <!-- login button -->
                <div class="form-group">
                    <button type="submit" class="btn btn-success btn-block btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 
<script>
	$(document).ready(function() {
    $('#loginForm')
        .on('init.field.bv', function(e, data) {
            var field  = data.field,        // Get the field name
                $field = data.element,      // Get the field element
                bv     = data.bv;           // BootstrapValidator instance

            // Create a span element to show valid message
            // and place it right before the field
            var $span = $('<small/>')
                            .addClass('help-block validMessage')
                            .attr('data-field', field)
                            .insertAfter($field)
                            .hide();

            // Retrieve the valid message via getOptions()
            var message = bv.getOptions(field).validMessage;
            if (message) {
                $span.html(message);
            }
        })
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                email: {
                    validMessage: '',
                    validators: {
                        notEmpty: {
                            message: 'Email is required'
                        }
                    }
                },
                password: {
                    validMessage: '',
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        }
                    }
                }
            }
        })
        .on('success.field.bv', function(e, data) {
            var field  = data.field,        // Get the field name
                $field = data.element;      // Get the field element

            // Show the valid message element
            $field.next('.validMessage[data-field="' + field + '"]').show();
        })
        .on('error.field.bv', function(e, data) {
            var field  = data.field,        // Get the field name
                $field = data.element;      // Get the field element

            // Show the valid message element
            $field.next('.validMessage[data-field="' + field + '"]').hide();
        });
});
</script>
-->
